<div id="user" class="page-layout simple tabbed">

    <!-- HEADER -->
    <div class="header accent p-24" fxLayout="column" fxLayoutAlign="center start">


        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">用户管理</span>
            </div>
            <div class="h1 mt-16" *ngIf="pageType ==='edit'">编辑用户</div>
            <div class="h1 mt-16" *ngIf="pageType ==='new'">新增用户</div>
        </div>


    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content">

        <form name="userForm" [formGroup]="userForm" class="product w-100-p" fxLayout="column" >
            <mat-tab-group dynamicHeight="true">

                <mat-tab label="基础信息">
                    <div class="p-24">

                        <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                            <mat-label>用户姓名</mat-label>
                            <input matInput placeholder="用户姓名"
                                   name="name"
                                   formControlName="name"
                                   required>
                        </mat-form-field>
                        <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                            <mat-label>登录账户</mat-label>
                            <input matInput placeholder="登录账户"
                                   name="username"
                                   formControlName="username"
                                   required>
                        </mat-form-field>
                        <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                            <mat-label>EMAIL</mat-label>
                            <input matInput placeholder="EMAIL"
                                   name="email"
                                   formControlName="email"
                                   required>
                        </mat-form-field>
                    </div>
                </mat-tab>

                <mat-tab label="用户头像" *ngIf="pageType ==='edit'">
                    <div class="p-24">
                        <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                            <mat-label>Cars</mat-label>
                            <mat-select [(value)]="selected"  multiple>
                                <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
                                    <!-- This is the tree node template for leaf nodes -->
                                    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
                                            <!-- use a disabled button to provide padding for tree leaf -->
                                            <button mat-icon-button disabled></button>
                                            <mat-option value="{{node.name}}">{{node.name}}</mat-option>
                                    </mat-tree-node>
                                    <!-- This is the tree node template for expandable nodes -->
                                    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
                                            <div class="mat-tree-node">
                                                <button mat-icon-button matTreeNodeToggle
                                                        [attr.aria-label]="'toggle ' + node.name">
                                                    <mat-icon class="mat-icon-rtl-mirror">
                                                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                                    </mat-icon>
                                                </button>
                                                <mat-option value="{{node.name}}">{{node.name}}</mat-option>
                                            </div>
                                    </mat-tree-node>
                                </mat-tree>
                            </mat-select>
                        </mat-form-field>
                        <p>You selected: {{selected}}</p>
                    </div>
                </mat-tab>

                <mat-tab label="详细信息">
                    <div class="content p-24">

                    </div>
                </mat-tab>

            </mat-tab-group>
        </form>

    </div>
    <!-- / CONTENT -->

</div>
